body {
	font-size: 12px;
	font-family: '맑은 고딕', 'Malgun Gothic', sans-serif;
}
.compTable {
	border: 0;
	table-layout: fixed;
	border-collapse: collapse;
}
.compTable td, .compTable th {
	padding: 8px 10px;
	border: 1px solid #ccc;
	vertical-align: middle;
}
.y {display: none; color:#00F;}
.n {display: block; color:#F00;}
.comment {color: #888; font-size: 11px;margin-top: -11px; padding-bottom: 20px;}

.ie8, .ch12, .ios43, .a23 {
	font-size: 0;
	text-indent: -9999px;
}
.ie8 {background: url('../img/icon_ie8.png') no-repeat 50% 50%;}
.ch12 {background: url('../img/icon_chrome12.png') no-repeat 50% 50%;}
.ios43 {background: url('../img/icon_ios43.png') no-repeat 50% 50%;}
.a23 {background: url('../img/icon_and23.png') no-repeat 50% 50%;}

.x1 {background: url('../img/x_1.png') no-repeat; width: 130px;}
.x2 {background: url('../img/x_2.png') no-repeat;}
.x3 {background: url('../img/x_3.png') no-repeat;}
.x4 {background: url('../img/x_4.png') no-repeat;}
.x5 {background: url('../img/x_5.png') no-repeat;}
.x6 {background: url('../img/x_6.png') no-repeat;}
.x7 {background: url('../img/x_7.png') no-repeat;}
.x8 {background: url('../img/x_8.png') no-repeat;}
.x9 {background: url('../img/x_9.png') no-repeat;}
.x10 {background: url('../img/x_9.png') no-repeat;}
.x11 {background: url('../img/x_9.png') no-repeat;}
.x12 {background: url('../img/x_12.png') no-repeat;}
.x13 {}
.x14 {background: url('../img/x_14.png') no-repeat;}
.x15 {background: url('../img/x_15.png') no-repeat;}
.x16 {background: url('../img/x_16.png') no-repeat;}
.x17 {background: url('../img/x_17.png') no-repeat;}
.x18 {}
.x19 {}

.s_tag {background: url('../img/no.png') no-repeat;}

header,
footer,
section,
article,
nav,
aside,
figure,
figcaption,
hgroup,
time,
mark {
	position: absolute;
	margin: -15px 0 0 -10px;
	padding: 0;
	display: block;
	width: 44px;
	height: 31px;
	background: url('../img/yes.png') no-repeat;
}

.fontface .fontface .y,
.backgroundsize .backgroundsize .y,
.borderimage .borderimage .y,
.borderradius .borderradius .y,
.boxshadow .boxshadow .y,
.flexbox .flexbox .y,
.hsla .hsla .y,
.multiplebgs .multiplebgs .y,
.opacity .opacity .y,
.rgba .rgba .y,
.textshadow .textshadow .y,
.cssanimations .cssanimations .y,
.csscolumns .csscolumns .y,
.cssgradients .cssgradients .y,
.cssreflections .cssreflections .y,
.csstransforms .csstransforms .y,
.csstransforms3d .csstransforms3d .y,
.csstransitions .csstransitions .y,
.applicationcache .applicationcache .y,
.canvas .canvas .y,
.canvastext .canvastext .y,
.draganddrop .draganddrop .y,
.hashchange .hashchange .y,
.history .history .y,
.audio .audio .y,
.video .video .y,
.indexeddb .indexeddb .y,
.localstorage .localstorage .y,
.postmessage .postmessage .y,
.sessionstorage .sessionstorage .y,
.websockets .websockets .y,
.websqldatabase .websqldatabase .y,
.webworkers .webworkers .y,
.geolocation .geolocation .y,
.inlinesvg .inlinesvg .y,
.smil .smil .y,
.svg .svg .y,
.svgclippaths .svgclippaths .y,
.touch .touch .y,
.webgl .webgl .y {display: block;}

.fontface .fontface .n,
.backgroundsize .backgroundsize .n,
.borderimage .borderimage .n,
.borderradius .borderradius .n,
.boxshadow .boxshadow .n,
.flexbox .flexbox .n,
.hsla .hsla .n,
.multiplebgs .multiplebgs .n,
.opacity .opacity .n,
.rgba .rgba .n,
.textshadow .textshadow .n,
.cssanimations .cssanimations .n,
.csscolumns .csscolumns .n,
.cssgradients .cssgradients .n,
.cssreflections .cssreflections .n,
.csstransforms .csstransforms .n,
.csstransforms3d .csstransforms3d .n,
.csstransitions .csstransitions .n,
.applicationcache .applicationcache .n,
.canvas .canvas .n,
.canvastext .canvastext .n,
.draganddrop .draganddrop .n,
.hashchange .hashchange .n,
.history .history .n,
.audio .audio .n,
.video .video .n,
.indexeddb .indexeddb .n,
.localstorage .localstorage .n,
.postmessage .postmessage .n,
.sessionstorage .sessionstorage .n,
.websockets .websockets .n,
.websqldatabase .websqldatabase .n,
.webworkers .webworkers .n,
.geolocation .geolocation .n,
.inlinesvg .inlinesvg .n,
.smil .smil .n,
.svg .svg .n,
.svgclippaths .svgclippaths .n,
.touch .touch .n,
.webgl .webgl .n {display: none;}

.pseudoelement .n {color: #F00;}
.pseudoelement:before {
	content: "Yes";
	position: absolute;
	display: block;
	width: 38px;
	height: 15px;
	text-align: center;
	color: #00F;
	background-color: #FFF;
	margin-left: -10px;
}

.eg_pseudoElement {}
.eg_pseudoElement:before {
	content: "before";
	border: 1px solid #00f;
	background-color: #c8c8ff;
	margin-right: 5px;
}
.eg_pseudoElement:after {
	content: "after";
	border: 1px solid #f00;
	background-color: #ffc8c8;
	margin-left: 5px;
}
.eg_webfont {font-family: 'Yeseva One', serif; font-size: 16px;}
.eg_bgSize {
	background: url('../img/bg_size.png') no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}
.eg_borderImage {
	color: #FFF;
	text-align: center;
    border: 5px solid #47576c;
	width: 100px;
	-webkit-border-image: url('../img/btn_border_dark.png') 5 stretch;
	-moz-border-image: url('../img/btn_border_dark.png') 5 stretch;
	-o-border-image: url('../img/btn_border_dark.png') 5 stretch;
	border-image: url('../img/btn_border_dark.png') 5 stretch;
}
.eg_borderRadius {
    border: 5px solid #47576c;
	width: 100px;
	text-align: center;
    -webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}
.eg_boxShadow {
	width: 100px;
	border: 1px solid #888;
	text-align: center;
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.eg_flexbox {
	width: 120px;
	border: 1px solid #555;
	text-align: center;
	/* flexbox setup */
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	display: -moz-box;
	-moz-box-orient: horizontal;
	display: box;
	box-orient: horizontal;
	}
.eg_flexbox > div {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
	-moz-transition: width 0.7s ease-out;
	-o-transition: width 0.7s ease-out;
	-webkit-transition: width 0.7s ease-out;
	transition: width 0.7s ease-out;
}
.eg_flexbox > div:nth-child(1){background : #FCC;}
.eg_flexbox > div:nth-child(2){background : #CFC;}
.eg_flexbox > div:nth-child(3){background : #CCF;}
.eg_flexbox > div:hover {width: 70px;}
.eg_multiBG {background: url('../img/bg_a.png') no-repeat 5px 5px,url('../img/bg_b.png') no-repeat 35px 5px,url('../img/bg_c.png') no-repeat 65px 5px;}
.eg_blue {
	width: 50px;
	height:16px;
	background-color: #00F; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
	margin: 0 0 -12px 10px;
}
.eg_red {
	width: 50px;
	height:16px;
	background-color: #F00; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.eg_blue2 {
	width: 50px;
	height:16px;
	background-color: rgba(0,0,255,.5);
	margin: 0 0 -12px 10px;
}
.eg_red2 {
	width: 50px;
	height:16px;
	background-color: rgba(255,0,0,.5);
}
.eg_blue3 {
	width: 50px;
	height:16px;
	background-color: hsla(240,100%,50%,.5);
	margin: 0 0 -12px 10px;
}
.eg_red3 {
	width: 50px;
	height:16px;
	background-color: hsla(0,100%,50%,.5);
}
.eg_textShadow {
	color: #FFF;
	font-weight: bold;
	font-size: 16px;
	text-shadow: 1px 1px 3px #000;
}
.eg_animation {
	width: 50px;
	height:16px;
	background-color: #00F; 
	-moz-animation-name: pulse;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-name: pulse;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes pulse {
	0% {
		margin-left:0;
	}
	50% {
		margin-left: 60px;
		background-color: #F00;
	}
	100% {
		margin-left:0;
		background-color: #00F;
	}
}
@-moz-keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.eg_column {
	font-size: 9px;
	width: 130px;
	height: 60px;
	overflow: hidden;
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	column-count: 3;
	column-gap: 10px;
}
.eg_gradient {
	width: 100px;
	height: 20px;
	background: #b8e1fc; /* Old browsers */
	background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
}
.eg_reflection {
	-webkit-box-reflect:right 3px -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.5))); /* Chrome,Safari4+ */
	-webkit-box-reflect:right 3px -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 100%); /* Chrome10+,Safari5.1+ */
}
.eg_transform {
	width: 100px;
	height: 20px;
	background-color: #00f;
	margin-left: 10px;
	color: #FFF;
	text-align: center;
	-webkit-transform: rotate(5deg) skew(-50deg);
	-moz-transform: rotate(5deg) skew(-50deg);
	-o-transform: rotate(5deg) skew(-50deg);
	-ms-transform: rotate(5deg) skew(-50deg);
	transform: rotate(5deg) skew(-50deg);
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
	transition:All 0.5s ease;
}
.eg_transform:hover {
	-webkit-transform: rotate(0deg) skew(0deg);
	-moz-transform: rotate(0deg) skew(0deg);
	-o-transform: rotate(0deg) skew(0deg);
	-ms-transform: rotate(0deg) skew(0deg);
	transform: rotate(0deg) skew(0deg);
}
.eg_cube {
	width: 54px;
	height: 20px;
	background: url('../img/nate_20.png') no-repeat;
	-moz-transform: translateX( 0% ) rotateY( 0deg ) rotateX( 0deg );
	-webkit-transform: translateX( 0% ) rotateY( 0deg ) rotateX( 0deg );
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
	transition:All 0.5s ease;
	-moz-animation-name: spin;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-name: spin;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
}
.eg_cube:hover {
	-moz-transform: translateX( 50% ) rotateY( -180deg ) rotateX( 30deg );
	-webkit-transform: translateX( 50% ) rotateY( -180deg ) rotateX( 30deg );
}
@-webkit-keyframes spin {
	0% {
	-webkit-transform: translateX( 0% ) rotateY( 0deg ) rotateX( 0deg );
		}
	50% {
		-webkit-transform: translateX( 50% ) rotateY( -180deg ) rotateX( 30deg );
	}
	100% {
		-webkit-transform: translateX( 0% ) rotateY( 0deg ) rotateX( 0deg );
	}
}
@-moz-keyframes spin {
	0% {
		-moz-transform: translateX( 0% ) rotateY( 0deg ) rotateX( 0deg );
	}
	50% {
		-moz-transform: translateX( 50% ) rotateY( -180deg ) rotateX( 30deg );
	}
	100% {
		-moz-transform: translateX( 0% ) rotateY( 0deg ) rotateX( 0deg );
	}
}
.eg_transition {
	width: 100px;
	line-height: 22px;
	background-color: #00F; 
	color: #FFF;
	text-align: center;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
	transition:All 0.5s ease;
}
.eg_transition.toggle {
	background-color: #F00; 
}


/* spinner loading */
.spinner { position:relative; width:18px; height:18px; z-index:191; -webkit-animation:spinner-loading infinite 800ms linear;-moz-animation:spinner-loading infinite 800ms linear; }
.spinner div { position:absolute;top:7.5px; left:8px; width:2px; height:4px; background:#C7C7C7; z-index:192; }
.spinner .bar1 { -webkit-transform:rotate(0deg) translate(0, -8px); }
.spinner .bar2 { -webkit-transform:rotate(30deg) translate(0, -8px); }
.spinner .bar3 { -webkit-transform:rotate(60deg) translate(0, -8px); }
.spinner .bar4 { -webkit-transform:rotate(90deg) translate(0, -8px); }
.spinner .bar5 { -webkit-transform:rotate(120deg) translate(0, -8px); }
.spinner .bar6 { -webkit-transform:rotate(150deg) translate(0, -8px); }
.spinner .bar7 { -webkit-transform:rotate(180deg) translate(0, -8px); }
.spinner .bar8 { -webkit-transform:rotate(210deg) translate(0, -8px); }
.spinner .bar9 { -webkit-transform:rotate(240deg) translate(0, -8px); background:#A4A4A4; }
.spinner .bar10 { -webkit-transform:rotate(270deg) translate(0, -8px); background:#686868; }
.spinner .bar11 { -webkit-transform:rotate(300deg) translate(0, -8px); background:#686868; }
.spinner .bar12 { -webkit-transform:rotate(330deg) translate(0, -8px); background:#A4A4A4; }
.spinner .bar1 { -moz-transform:rotate(0deg) translate(0, -8px); }
.spinner .bar2 { -moz-transform:rotate(30deg) translate(0, -8px); }
.spinner .bar3 { -moz-transform:rotate(60deg) translate(0, -8px); }
.spinner .bar4 { -moz-transform:rotate(90deg) translate(0, -8px); }
.spinner .bar5 { -moz-transform:rotate(120deg) translate(0, -8px); }
.spinner .bar6 { -moz-transform:rotate(150deg) translate(0, -8px); }
.spinner .bar7 { -moz-transform:rotate(180deg) translate(0, -8px); }
.spinner .bar8 { -moz-transform:rotate(210deg) translate(0, -8px); }
.spinner .bar9 { -moz-transform:rotate(240deg) translate(0, -8px); background:#A4A4A4; }
.spinner .bar10 { -moz-transform:rotate(270deg) translate(0, -8px); background:#686868; }
.spinner .bar11 { -moz-transform:rotate(300deg) translate(0, -8px); background:#686868; }
.spinner .bar12 { -moz-transform:rotate(330deg) translate(0, -8px); background:#A4A4A4; }

@-webkit-keyframes 'spinner-loading' {
	0% {-webkit-transform:rotate(0deg);}
	8.3% {-webkit-transform:rotate(0deg);}
	8.31% {-webkit-transform:rotate(30deg);}
	16.6% {-webkit-transform:rotate(30deg);}
	16.61% {-webkit-transform:rotate(60deg);}
	24.9% {-webkit-transform:rotate(60deg);}
	24.91% {-webkit-transform:rotate(90deg);}
	33.2% {-webkit-transform:rotate(90deg);}
	33.21% {-webkit-transform:rotate(120deg);}
	41.5% {-webkit-transform:rotate(120deg);}
	41.51% {-webkit-transform:rotate(150deg);}
	49.8% {-webkit-transform:rotate(150deg);}
	49.81% {-webkit-transform:rotate(180deg);}
	58.1% {-webkit-transform:rotate(180deg);}
	58.11% {-webkit-transform:rotate(210deg);}
	66.4% {-webkit-transform:rotate(210deg);}
	66.41% {-webkit-transform:rotate(240deg);}
	74.7% {-webkit-transform:rotate(240deg);}
	74.71% {-webkit-transform:rotate(270deg);}
	83.0% {-webkit-transform:rotate(270deg);}
	83.01% {-webkit-transform:rotate(300deg);}
	91.3% {-webkit-transform:rotate(300deg);}
	91.31% {-webkit-transform:rotate(330deg);}
	100% {-webkit-transform:rotate(330deg);}
}
@-moz-keyframes 'spinner-loading' {
	0% {-moz-transform:rotate(0deg);}
	8.3% {-moz-transform:rotate(0deg);}
	8.31% {-moz-transform:rotate(30deg);}
	16.6% {-moz-transform:rotate(30deg);}
	16.61% {-moz-transform:rotate(60deg);}
	24.9% {-moz-transform:rotate(60deg);}
	24.91% {-moz-transform:rotate(90deg);}
	33.2% {-moz-transform:rotate(90deg);}
	33.21% {-moz-transform:rotate(120deg);}
	41.5% {-moz-transform:rotate(120deg);}
	41.51% {-moz-transform:rotate(150deg);}
	49.8% {-moz-transform:rotate(150deg);}
	49.81% {-moz-transform:rotate(180deg);}
	58.1% {-moz-transform:rotate(180deg);}
	58.11% {-moz-transform:rotate(210deg);}
	66.4% {-moz-transform:rotate(210deg);}
	66.41% {-moz-transform:rotate(240deg);}
	74.7% {-moz-transform:rotate(240deg);}
	74.71% {-moz-transform:rotate(270deg);}
	83.0% {-moz-transform:rotate(270deg);}
	83.01% {-moz-transform:rotate(300deg);}
	91.3% {-moz-transform:rotate(300deg);}
	91.31% {-moz-transform:rotate(330deg);}
	100% {-moz-transform:rotate(330deg);}
}

.eg_a_active, .eg_div_active {
	display: block;
	width: 120px;
	line-height: 20px;
	text-align: center;
	border: 1px solid #888;
}
.eg_a_active:active, .eg_div_active:active {
	color: #F00;
	background-color: #ffb4b4;
	border: 1px solid #F00;
}